<template>
	<div class="main">
		<ul>
			<h2>编程</h2>
			<p style="border: 1px solid #eeeeee;"></p>
			<li v-for="post in res" :key="post.id">
				<h3>
					<router-link to="">
						{{post.title}}
					</router-link>
				</h3>
				<img :src="post.pic" />
				<p>
					作者:{{post.author}}
					发表于:{{post.time}}

					<span class="float-right">

						<router-link to="">
							查看原文
							<i class="el-icon-d-arrow-right"></i>
						</router-link>

					</span>
				</p>
				<p style="border: 1px solid #eeeeee;"></p>
			</li>
			<p class="di">
				<button class="dianji">首页</button>
				<button>下一页</button>
				<button style="background-color: #0088b3; color: white;">1</button>
				<button>2</button>
				<button>上一页</button>
				<button>尾页</button>
			</p>
		</ul>
	</div>
</template>

<script>
	//模拟请求到的数据
	let resData = [{
			"id": "1",
			"title": "PHP学科:MySQL手册",
			"author": "博学谷",
			"time": "05-31 14:50:07",
			"des": "文章描述",
		},
		{
			"id": "2",
			"title": "前端必学框架",
			"author": "博学谷",
			"time": "05-31 14:50:07",
			"des": "文章描述",
		},
		{
			"id": "3",
			"title": "最涨薪PHP的项目",
			"author": "博学谷",
			"time": "05-31 14:50:07",
			"des": "文章描述",
		},
		{
			"id": "4",
			"title": "PHP进阶:49个要点",
			"author": "博学谷",
			"time": "05-31 14:50:07",
			"des": "文章描述",
		},
		{
			"id": "5",
			"title": "PHP微信公众平台开发",
			"author": "博学谷",
			"time": "05-31 14:50:07",
			"des": "文章描述",
			"pic": require("../../assets/tu.png")
		},
	]
	export default {
		data() {
			return {
				res: resData
			}
		}
	}
</script>

<style scoped>
	.main {
		background: #fff;
	}

	.float-right {
		float: right;
	}

	a {
		color: #000;
		text-decoration: none;
	}

	li {
		list-style: none;
	}

	input {
		height: 13px;
	}
	.i1 {
		width: 27px;

	}

	.i2 {
		width: 40px;

	}

	.i3 {
		width: 10px;
	}
	.di{
		text-align: center;
	}
	button{
		color: #cccccc;
		margin:4px ;
		background-color: white;
		border:1px solid #cccccc;
		}
</style>
